<template>
  <el-header class="header">
    <img class="logo" src="./assets/poem.png" alt="Poem Logo" />
    <h1>墨客故里</h1>
    <div class="header-links">
      <router-link to="/" class="home-link">首页</router-link>
      <router-link to="/Poet" class="poet-link">诗人</router-link>
    </div>
  </el-header>
  <router-view />
  <el-backtop :right="100" :bottom="100" />
  <footer class="footer">
    <div class="contact">
      <h3>联系我们</h3>
      <h5>如有发现纰漏或有其他详实可查的诗人资料，欢迎联系我们指导交流</h5>
      <p>电话：123-456-7890</p>
      <p>电子邮件：mogu@example.com</p>
    </div>
  </footer>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

/*标题 */
/* 调整header和map-frame之间的间距 */
.header {
  display: flex;
  height: 80px;
  background-color: #f0f0f0;
  align-items: center;
  width: 100%;
  /* 宽度占满屏幕 */
  margin: 0;
  /* 清除 margin */
}

.logo {
  width: 66px;
  height: 66px;
  margin-right: 13px;
}

h1 {
  font-family: "SuiFengTi";
  font-size: 50px;
  color: #333;
  margin: 0;
}

/*首页链接 */
.header-links {
  margin-left: auto;
  margin-right: 5%;
}

/*首页链接 */
.home-link {
  font-family: "SuiFengTi";
  color: #333;
  /* 设置链接文本颜色 */
  font-weight: bold;
  /* 设置字体加粗 */
  transition: color 0.3s;
  /* 添加过渡效果 */
  margin-right: 20px;
  text-decoration: none;
  font-size: 25px;
}

.home-link:hover {
  color: #a1ad69;
  /* 设置鼠标悬停时的文本颜色 */
}

.poet-link {
  font-family: "SuiFengTi";
  color: #333;
  /* 设置链接文本颜色 */
  font-weight: bold;
  /* 设置字体加粗 */
  transition: color 0.3s;
  /* 添加过渡效果 */
  text-decoration: none;
  font-size: 25px;
}
.poet-link:hover {
  color: #a1ad69;
  /* 设置鼠标悬停时的文本颜色 */
}
.footer {
  background-color: #d0d1d0;
  padding: 20px;
  text-align: center;
}
</style>
